import { React, useEffect, useRef, useState } from 'react';
import './personaldata.css';
import '../../../index.css';
import axios from 'axios';
import InterIP from '../../../IP/IP';
import { useNavigate } from 'react-router-dom';
export default function Personaldata() {

  const [personageData, setpersonageData] = useState([]);
  const [birthdayGo, setbirthdayGo] = useState([]);
  const headPhoto = useRef()
  const nickName = useRef()
  const gender = useRef()
  const Iphone = useRef()
  const birthdayGo1 = useRef();
  const birthdayGo2 = useRef();
  const birthdayGo3 = useRef();
  const navigate = useNavigate()
  var genderGo = '';

  useEffect(() => {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selUser", {
      user_id: userID,
    })
      .then((res) => {
        setpersonageData((personageData) => personageData = res.data[0])
        if (res.data[0].birthday) {
          setbirthdayGo((birthdayGo) => birthdayGo = res.data[0].birthday.split('/'))
        }
      })
  }, []);
  // //上传图片
  // function submitFile() {
  //   let formData = new FormData();
  //   formData.append("header", file.current.files[0]);
  //   let config = {
  //     headers: { "Content-Type": "multipart/form-data" }
  //   };
  //   axios.post('http://localhost:3000/upload/', formData, config).then((res) => {
  //     console.log(res);
  //     setImgSrc((imgSrc) => imgSrc = res.data.img)
  //   })
  // }
  function submit() {
    if (gender.current.checked) {
      genderGo = '男'
    }
    else {
      genderGo = '女'
    }
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/updateUser", {
      user_header: headPhoto.current.src,
      nickname: nickName.current.value,
      sex: genderGo,
      birthday: birthdayGo1.current.value + '/' + birthdayGo2.current.value + '/' + birthdayGo2.current.value,
      user_name: Iphone.current.value,
      user_id: userID,
    })
      .then((res) => {
        alert('修改成功')
      })
  }

  function changeIphone(iphone) {
    return () => {
      navigate("/home/person/changephone", {
        state: {
          data: iphone,
        }
      })
    }
  }
  return (
    <div id="personaldata">
      <div className="mybill_top">个人资料</div>
      <div className="personaldata_main">
        <div className="personaldata_lis">
          <span>当前头像：</span>
          <div className="personaldata_head">
            <img src={personageData.user_header} alt="" ref={headPhoto} />
          </div>
        </div>
        <div className="personaldata_lis">
          <span>昵称：</span>
          <input type="text" ref={nickName} defaultValue={personageData.nickname} />
        </div>
        <form className="personaldata_form personaldata_lis">
          <span>性别：</span>
          <label>
            {personageData.sex === '男' ? <input type="radio" name="xingbie" ref={gender} defaultChecked={true} /> : <input type="radio" name="xingbie" ref={gender} />}
          </label>
          <span>男</span>
          <label>
            {personageData.sex === '女' ? <input type="radio" name="xingbie" defaultChecked={true} /> : <input type="radio" name="xingbie" />}
          </label>
          <span>女</span>
        </form>
        <div className="personaldata_lis personaldata_birthday">
          <span>生日：</span>
          <input type="text" ref={birthdayGo1} defaultValue={birthdayGo[0]} maxLength={4} />
          <span>年</span>
          <input type="text" ref={birthdayGo2} defaultValue={birthdayGo[1]} maxLength={2} />
          <span>月</span>
          <input type="text" ref={birthdayGo3} defaultValue={birthdayGo[2]} maxLength={2} />
          <span>日</span>
        </div>
        <div className="personaldata_lis">
          <span>手机：</span>
          <input type="text" ref={Iphone} defaultValue={personageData.user_name} disabled="disabled" />
          <button className="personaldata_button1" onClick={changeIphone(personageData)}>更换手机</button>
        </div>
        <div className="personaldata_lis">
          <button className="personaldata_button2" onClick={submit}>确认提交</button>
        </div>
      </div>
    </div>
  )
}
